@import '../../../styles/mixins';
@import '../../../styles/vars';

.Playlist {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);

    .Playlist__list {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        height: 100%;
        overflow: hidden;

        &:not(.Playlist__list--collapsed) {
            width: 25%;
            min-width: 305px;
            max-width: 350px;
        }

        .text-link {
            color: var(--text-3000) !important;
        }
    }

    .Playlist__main {
        flex: 1;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    &--embedded {
        border: none;
    }

    &--wide {
        .Playlist__main {
            flex: 1;
            height: 100%;
        }
    }
}

.SessionRecordingPlaylistHeightWrapper {
    // NOTE: Somewhat random way to offset the various headers and tabs above the playlist
    height: calc(100vh - 15rem);
    min-height: 25rem;
}

.SessionRecordingPreview {
    border-left: 3px solid transparent;

    &--active {
        border-left-color: var(--primary-3000);
    }

    &:hover {
        background-color: var(--primary-highlight);
    }
}
